@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
*, *:before, *:after {
    box-sizing: border-box;
}
.bar {
    /*height: 36px;*/
    width: 0;
    transition: width 1.2s ease-in-out;
    position: relative;
    color:#6eebec;
    /* border-radius: 4px;*/
}
.bar.default {
    text-align: right;
    /*  font-family: "Open sans", Arial, sans-serif;*/
    background-color: #2b2d3b;
    background-image: repeating-linear-gradient(-45deg, #2b2d3b, #2b2d3b 2px, #191a23 1px, #2b2d3b 3px);
    background-size: 600px 100%;
    transition:width 2s;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;
    /*animation: barberpole 12s linear infinite;*/
    /* border-bottom: 0.2rem solid #191a23;*/
}
.bar.mint {
    background-color: #14c3a2;
    background-image: repeating-linear-gradient(-45deg, #14c3a2, #14c3a2 30px, #22e8c3 30px, #22e8c3 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    border-bottom: 0.2rem solid #0d7e68;
}
.bar.red {
    background-color: #cf4647;
    background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    border-bottom: 0.2rem solid #9f292a;
}
.bar.orange {
    background-color: #eb7b59;
    background-image: repeating-linear-gradient(-45deg, #eb7b59, #eb7b59 30px, #f09f87 30px, #f09f87 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    border-bottom: 0.2rem solid #dd481b;
}
.bar.lila {
    background-color: #524656;
    background-image: repeating-linear-gradient(-45deg, #524656, #524656 30px, #6d5d72 30px, #6d5d72 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    border-bottom: 0.2rem solid #2a242c;
}
.bar.gray {
    background-color: #595b5a;
    background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px);
    background-size: 600px 100%;
    animation: barberpole 12s linear infinite;
    border-bottom: 0.2rem solid #333434;
}
.bar.active:after, .bar.active:before {
    opacity: 1;
}
.bar:before {
    /*  content: attr(data-skill);*/
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /*padding: 10px;*/
    /*height: 40px;*/
    font-style: italic;
    opacity: 0;
    transition: opacity 2s 0.6s;
}
@media(max-width: 350px) {
    .bar:before {
        top: -100%;
        color: black;
        padding: 10px 0 0;
    }
}
.bar:after {
    /*content: attr(data-percent) "%";*/
    content: attr(data-skill);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 2s 0.6s;
}
@media(max-width: 350px) {
    .bar:after {
        left: 0;
    }
}
@keyframes barberpole {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 600px 0%;
    }
}
.bar.active[data-percent="5"] {
    width: 5%;
}

.bar.active[data-percent="10"] {
    width: 10%;
}

.bar.active[data-percent="15"] {
    width: 15%;
}

.bar.active[data-percent="20"] {
    width: 20%;
}

.bar.active[data-percent="25"] {
    width: 25%;
}

.bar.active[data-percent="30"] {
    width: 30%;
}

.bar.active[data-percent="35"] {
    width: 35%;
}

.bar.active[data-percent="40"] {
    width: 40%;
}

.bar.active[data-percent="45"] {
    width: 45%;
}

.bar.active[data-percent="50"] {
    width: 50%;
}

.bar.active[data-percent="55"] {
    width: 55%;
}

.bar.active[data-percent="60"] {
    width: 60%;
}

.bar.active[data-percent="65"] {
    width: 65%;
}

.bar.active[data-percent="70"] {
    width: 70%;
}

.bar.active[data-percent="75"] {
    width: 75%;
}

.bar.active[data-percent="80"] {
    width: 80%;
}

.bar.active[data-percent="85"] {
    width: 85%;
}

.bar.active[data-percent="90"] {
    width: 90%;
}

.bar.active[data-percent="95"] {
    width: 95%;
}

.bar.active[data-percent="100"] {
    width: 100%;
}